<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户中心</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <th:block th:include="common/link::link"></th:block>
    <style>

        .subject-list {
            margin-top: 15px;
            font-size: 0;
        }

        .subject-list li {
            display: inline-block;
            vertical-align: middle;
            *display: inline;
            *zoom: 1;
            font-size: 14px;
            background-color: hsl(0, 0%, 97%);
        }

        .subject-list {
            width: 110%;
        }

        .subject-list li {
            width: 100px;
            border-radius: 5px;
            margin: 0 15px 15px 0;
        }

        .subject-list li:hover {
            box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
        }

        .subject-img {
            position: relative;
            display: block;
        }

        .subject-img img {
            width: 100px;
            height: 140px;
        }


    </style>
</head>
<body>
<div class="header">
    <th:block th:include="common/header::header"></th:block>
</div>
<div class="main fly-user-main layui-clear">
    <th:block th:include="common/left::left"></th:block>

    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>

    <div class="fly-panel fly-panel-user" pad20>

        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <!--（<span id="sub-count">0</span>）-->
                <li data-type="mine-jie" lay-id="index" class="layui-this">我的主题</li>
                <li data-type="collection" data-url="/collection/find/" lay-id="article">我的文章</li>
                <li data-type="collection" data-url="/collection/find/" lay-id="collection">我的收藏</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <ul class="subject-list" id="userSubject">
                        <th:block th:if="${not #lists.isEmpty(subjectList)}">
                            <th:block th:each="subject,index:${subjectList}">
                                <li>
                                    <a class="subject-img" href="#"
                                       th:href="@{${rootPath}+'/article/list/'+${subject.subjectId}+'/'+${subject.subjectTitle}}"
                                       title="点击查看">
                                        <img th:src="${subject.cover}"
                                             src="https://user-gold-cdn.xitu.io/2017/12/18/160691fc2995dbf9?imageView2/1/w/200/h/280/q/95/format/webp/interlace/1"
                                             alt="">
                                    </a>
                                    <div style="margin-top: 5px;">
                                        <a th:href="@{${rootPath}+'/subject/'+${subject.subjectId}}"
                                           class="layui-btn layui-btn-xs layui-btn-primary"
                                           style="margin-left: 1px; padding: 0px">编辑</a>
                                        <a th:href="@{${rootPath}+'/subject/'+${subject.subjectId}+'/md'}"
                                           class="layui-btn layui-btn-xs layui-btn-primary" style="margin-left: 1px; padding: 0px">导出</a>
                                        <a href="javascript:void(0)"
                                           th:onclick="'javascript:deleteSubject(\''+${subject.subjectId}+'\')'"
                                           class="layui-btn layui-btn-xs layui-btn-primary" style="margin-left: 1px; padding: 0px">删除</a>
                                    </div>
                                </li>
                            </th:block>
                        </th:block>

                    </ul>
                    <div id="LAY_page"></div>
                </div>
                <div class="layui-tab-item">
                    <ul class="mine-view jie-row" id="userArticle">
                        <!-- <li>
                             <a class="jie-title" href="/jie/8116.html" target="_blank">LayIM 3.5.0 发布，移动端版本大更新（带演示图）</a>
                             <i>2017/3/14 上午8:30:00</i>
                             <a class="mine-edit" href="/jie/edit/8116">编辑</a>
                             <em>661阅/10答</em>
                         </li>-->
                    </ul>
                    <div id="article-page"></div>
                </div>
                <div class="layui-tab-item">
                    <ul class="mine-view jie-row" id="userCollection">
                        <!-- <li>
                             <a class="jie-title" href="#" target="_blank">asdasdasd</a>
                             <i>收藏于23小时前</i>
                         </li>-->
                    </ul>
                    <div id="collect-page"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../../static/layui/layui.js" th:src="@{${rootPath} + '/static/layui/layui.js'}"></script>
<script th:inline="javascript">

    $("li").removeClass("layui-this");
    $("#fly-center").addClass("layui-this")

    layui.use(['util', 'element', 'layer', 'form', 'laypage'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        var laypage = layui.laypage;
        var element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
    });

    function deleteSubject(subjectId) {
        //询问框
        layer.confirm('确定删除吗 ？', {
            btn: ['删除', '取消'] //按钮
        }, function () {
            $.ajax({
                type: "DELETE",
                url: "../subject/" + subjectId,
                success: function (data) {
                    layer.msg('删除成功', {icon: 1});
                }
            });

        }, function (index, layero) {
            layer.close(index);
        });
    }

    function exportSubject(subjectId) {
        var $eleForm = $("<form method='get'></form>");

        $eleForm.attr("action","http://");

        $(document.body).append($eleForm);

        //提交表单，实现下载
        $eleForm.submit();
    }



    var dataCount = 0;
    $.getJSON("../article/count", {}, function (result) {
        dataCount = result.data;
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage, layer = layui.layer;
            //完整功能
            laypage.render({
                elem: 'article-page',
                count: dataCount,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj) {
                    //obj.curr,obj.limit
                    console.log(obj.curr)
                    $.getJSON("../article/user", {"pageNum": obj.curr, "pageSize": obj.limit}, function (result) {
                        $("#userArticle").empty();
                        $.each(result.data.list, function (index, simple) {
                            $("#userArticle").append('<li>' +
                                '        <a class="jie-title" href="../article/detail/' + simple.articleId + '" target="_blank" >' + simple.title + '</a>' +
                                '        <i>' + getMyDate(simple.createTime) + '</i>' +
                                '        <a class="mine-edit" href="../article/' + simple.articleId + '">编辑</a>' +
                                '        <em>' + simple.viewNum + '/' + simple.commentNum + '/' + simple.likeNum + '</em>' +
                                '     </li>');
                        });
                    });
                }
            });
        });
    });

    var collectCount = 0;
    $.getJSON("../article/collection/count", {}, function (result) {
        collectCount = result.data;
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage, layer = layui.layer;
            //完整功能
            laypage.render({
                elem: 'collect-page',
                count: collectCount,
                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                jump: function (obj) {
                    //obj.curr,obj.limit
                    $.getJSON("../article/collection", {"pageNum": obj.curr, "pageSize": obj.limit}, function (result) {
                        $("#userCollection").empty();
                        $.each(result.data.list, function (index, simple) {
                            $("#userCollection").append('<li>\n' +
                                '                            <a class="jie-title" href="#" target="_blank">' + simple.cmsArticle.title + '</a>' +
                                '                            <i>' + timeAgo(getMyDate(simple.createTime)) + '</i>\n' +
                                '                        </li>');
                        });
                    });
                }
            });
        });
    });

</script>

</body>
</html>